<template>
  <div class="app-container">
  <app-header @outer = 'fn' ref="a"/>
  <button @click="fn">change</button>
  <message>
    <span slot="a">hello,word!</span>
    <span slot="b">111111111111</span>
    <span slot="c">hi,word</span>
  </message>
  <app-footer :inner="tempData" ref="b"/>
  </div>
</template>

<script>
import appHeader from './components/app-header';
import appFooter from './components/app-footer';

export default {
  name: 'App',
  data() {
    return {
      tempData: '',
    };
  },
  methods: {
    fn(data) {
      this.tempData = data;
      // this.$refs.a.msg = 123;
      // this.$refs.b.msg = 345;
    },
  },
  components: { appHeader, appFooter },
};
</script>

<style>
.app-container{
  width: 100vw;
  height: 100vh;
  background: #fff;
  color: #fff;
}
</style>
